<template>

	<!-- 头部菜单 -->
	<view class="navibar">
		<i 
			class="iconfont icon-guolvtiaojian mask" 
			style="font-size: 42rpx;" 
			@click="openPopup()"
		>
		</i>
		<u-tabs :list="list1" @change="changeTab" :current="0"></u-tabs>
		<i class="iconfont icon-fenxiang5 mask" style="font-size: 42rpx;"></i>
	</view>
	
	<!-- 列表内容 -->
	<view v-if="current == 0">
		<component-a></component-a>
	</view>
	<view v-if="current == 1">
		<component-b></component-b>
	</view>
	<view v-if="current == 2">
		<component-c></component-c>
	</view>
	
	<!-- 底部弹出 -->
	<u-popup :show="show" overlay="true" :round="5" mode="bottom" closeable='true' overlayOpacity="0.2" @close="close" @open="open">
		<view>
			<u-gap height="300"></u-gap>
		</view>
	</u-popup>
</template>

<script>
	import componentA from "@/pages/index/a.vue"
	import componentB from "@/pages/index/b.vue"
	import componentC from "@/pages/index/c.vue"
	
	export default {
		components:{
			componentA,
			componentB,
			componentC
		},
		data() {
			return {
				show: false,
				current: 0,
				list1: [{
						name: '关注',
				}, {
						name: '推荐',
				}, {
						name: '同城',
				}]
			}
		},
		methods: {
			openPopup() {
				uni.$u.sleep().then(() => {
					this.show = !this.show
				})
			},
			close() {
				this.show = false
			},
			changeTab(item) {
				console.log('item1', item);
				this.current=item.index;
				// console.log('item', this.current);
			}
		}
	}
</script>

<style lang="scss">
	.u-popup-slot {
		width: 200px;
		height: 150px;
		@include flex;
		justify-content: center;
		align-items: center;
	}
</style>

<style lang="scss">
@import "@/static/iconfont/iconfont.css";

.mask{
	padding: 13rpx;
	background-color: #F6F6F6;
	border-radius: 50%
}

// 头部菜单
.navibar{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5rpx 18rpx;
	border-bottom: 1rpx solid #eee;
	background-color: #fff;
}
</style>